<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谭豪森的个人网站 - 视觉传达设计</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-light text-dark font-sans">
    <!-- 导航栏 -->
    <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-custom">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#home" class="text-primary font-bold text-xl flex items-center gap-2">
                <i class="fa fa-paint-brush"></i>
                <span>谭豪森的设计空间</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#home" class="font-medium hover:text-primary transition-custom">首页</a>
                <a href="#advantages" class="font-medium hover:text-primary transition-custom">专业优势</a>
                <a href="#works" class="font-medium hover:text-primary transition-custom">作品展示</a>
                <a href="#contact" class="font-medium hover:text-primary transition-custom">联系我</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menuBtn" class="md:hidden text-dark text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white border-t animate-fadeIn">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="#home" class="font-medium py-2 hover:text-primary transition-custom">首页</a>
                <a href="#advantages" class="font-medium py-2 hover:text-primary transition-custom">专业优势</a>
                <a href="#works" class="font-medium py-2 hover:text-primary transition-custom">作品展示</a>
                <a href="#contact" class="font-medium py-2 hover:text-primary transition-custom">联系我</a>
            </div>
        </div>
    </header>

    <main>
        <!-- 首页区域 -->
        <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-primary/10">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row items-center gap-10">
                    <div class="w-full md:w-1/2 space-y-6">
                        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark">
                            设计宣传海报<br>
                            <span class="text-primary">视觉传达的艺术</span>
                        </h1>
                        <p class="text-lg text-gray-600">
                            欢迎来到谭豪森的个人网站<br>
                            视觉传达设计2024级 · 专注于创意与视觉的完美结合
                        </p>
                        <div class="pt-4">
                            <a href="#works" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium px-8 py-3 rounded-lg shadow-lg hover:shadow-xl transition-custom">
                                查看我的作品 <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="w-full md:w-1/2">
                        <div class="relative">
                            <div class="absolute -inset-4 bg-primary/20 rounded-2xl rotate-3"></div>
                            <img src="https://picsum.photos/id/1073/600/400" alt="设计作品展示" class="relative rounded-xl shadow-xl w-full object-cover h-[300px] md:h-[400px]">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 专业优势区域 -->
        <section id="advantages" class="py-16 md:py-24">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">专业优势</h2>
                    <p class="text-gray-600 text-lg">掌握核心设计技能，打造专业设计能力</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    <!-- 图案设计 -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl p-6 transition-custom group">
                        <div class="w-16 h-16 bg-primary/10 text-primary rounded-lg flex items-center justify-center text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-custom">
                            <i class="fa fa-th-large"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">图案设计</h3>
                        <p class="text-gray-600 mb-6">专注于创意图案的设计与应用，打造独特视觉元素</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                    
                    <!-- 海报设计 -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl p-6 transition-custom group">
                        <div class="w-16 h-16 bg-primary/10 text-primary rounded-lg flex items-center justify-center text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-custom">
                            <i class="fa fa-file-image-o"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">海报设计</h3>
                        <p class="text-gray-600 mb-6">通过视觉语言传递信息，创造有影响力的海报作品</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                    
                    <!-- PS -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl p-6 transition-custom group">
                        <div class="w-16 h-16 bg-primary/10 text-primary rounded-lg flex items-center justify-center text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-custom">
                            <i class="fa fa-picture-o"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">PS</h3>
                        <p class="text-gray-600 mb-6">精通Photoshop图像处理技术，实现创意视觉效果</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                    
                    <!-- AI -->
                    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl p-6 transition-custom group">
                        <div class="w-16 h-16 bg-primary/10 text-primary rounded-lg flex items-center justify-center text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-custom">
                            <i class="fa fa-magic"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">AI</h3>
                        <p class="text-gray-600 mb-6">掌握Illustrator矢量图形设计，创作精准视觉作品</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            了解更多 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 作品展示区域 -->
        <section id="works" class="py-16 md:py-24 bg-gray-50">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">作品展示</h2>
                    <p class="text-gray-600 text-lg">精选设计作品，展现创意与技术的融合</p>
                </div>
                
                <div class="relative w-full h-[500px] bg-gray-200 rounded-xl overflow-hidden shadow-lg">
                    <!-- 背景海报图片 -->
                    <img src="https://picsum.photos/id/3/1200/800" alt="海报背景" class="w-full h-full object-cover opacity-70">
                    
                    <!-- 作品展示文字覆盖 -->
                    <div class="absolute inset-0 flex items-center justify-center bg-dark/30 backdrop-blur-sm">
                        <h3 class="text-[clamp(2rem,6vw,4rem)] font-bold text-white text-shadow tracking-wider">
                            作品展示
                        </h3>
                    </div>
                    
                    <!-- 作品展示提示 -->
                    <div class="absolute bottom-6 left-0 right-0 text-center">
                        <p class="text-white text-shadow">更多作品正在整理中，敬请期待...</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 联系我区域 -->
        <section id="contact" class="py-16 md:py-24">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">联系我</h2>
                    <p class="text-gray-600 text-lg">无论您有任何设计需求或合作意向，都可以通过以下方式联系我</p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
                    <!-- 设计水平照片展示 -->
                    <div class="grid grid-cols-2 gap-4">
                        <img src="https://picsum.photos/id/1048/600/800" alt="设计相关图片1" class="rounded-lg shadow-md w-full h-64 object-cover hover:scale-105 transition-custom">
                        <img src="https://picsum.photos/id/1060/600/800" alt="设计相关图片2" class="rounded-lg shadow-md w-full h-64 object-cover hover:scale-105 transition-custom">
                        <img src="https://picsum.photos/id/175/600/800" alt="设计相关图片3" class="rounded-lg shadow-md w-full h-64 object-cover hover:scale-105 transition-custom">
                        <img src="https://picsum.photos/id/180/600/800" alt="设计相关图片4" class="rounded-lg shadow-md w-full h-64 object-cover hover:scale-105 transition-custom">
                    </div>
                    
                    <!-- 联系表单 -->
                    <div class="bg-white p-8 rounded-xl shadow-lg">
                        <form id="contactForm" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                    <input type="text" id="name" name="name" placeholder="请输入您的姓名" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                                </div>
                                <div>
                                    <label for="phone" class="block text-gray-700 font-medium mb-2">电话号码</label>
                                    <input type="tel" id="phone" name="phone" placeholder="请输入您的电话号码" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                                </div>
                            </div>
                            
                            <div>
                                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱地址</label>
                                <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                            </div>
                            
                            <div>
                                <label for="message" class="block text-gray-700 font-medium mb-2">需求描述</label>
                                <textarea id="message" name="message" rows="5" placeholder="请详细描述您的需求..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom"></textarea>
                            </div>
                            
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-custom">
                                提交 <i class="fa fa-paper-plane ml-2"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
                <div class="text-center md:text-left">
                    <h3 class="text-xl font-bold mb-2">谭豪森的设计空间</h3>
                    <p class="text-gray-400">视觉传达设计2024级 · 创意无限</p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white text-xl transition-custom">
                        <i class="fa fa-weixin"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white text-xl transition-custom">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white text-xl transition-custom">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white text-xl transition-custom">
                        <i class="fa fa-behance"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
                <p>© 2024 谭豪森的个人网站 | 视觉传达设计专业</p>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-custom z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            // 切换图标
            const icon = menuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    const icon = menuBtn.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 返回顶部按钮
        const backToTopBtn = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
            
            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2', 'shadow');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 表单提交处理
        const contactForm = document.getElementById('contactForm');
        
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 在实际应用中，这里会有表单验证和数据提交逻辑
            alert('表单提交成功！我们会尽快与您联系。');
            contactForm.reset();
        });
    </script>
</body>
</html>